<template>
  <el-dialog :close-on-click-modal="false" title="巡检点位详情" width="700px" top="10vh" :visible.sync="visible" v-dialogDrag>
    <div class="form-viewonly">
      <el-row :gutter="10">
        <el-col :span="5" class="form-viewonly__title">安装位置照片：</el-col>
        <el-col :span="19">
          <template v-if="dataForm.picUrl">
            <el-image
              v-for="(item) in dataForm.picUrl.split(',')"
              :key="item"
              :src="formatPicUrl(item)"
              :preview-src-list="dataForm.picUrl.split(',')"
              fit="fill"
              style="width:192px;height:108px;"
            ></el-image>
          </template>
          <el-image
            v-else
            :src="defaultImg"
            :preview-src-list="[defaultImg]"
            fit="fill"
            style="width:200px;height:142px;"
          ></el-image>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="5" class="form-viewonly__title">点位名称：</el-col>
        <el-col :span="19">{{dataForm.name}}</el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="5" class="form-viewonly__title" style="padding-top:10px;">点位编码：</el-col>
        <el-col :span="19">
          <div>
            {{dataForm.pointCode}}
            <el-button type="text" @click="handleExport()">导出</el-button>
          </div>
          <vue-qr ref="myQr" :text="dataForm.pointCode" :size="200" :margin="10"></vue-qr>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="5" class="form-viewonly__title">所属类别：</el-col>
        <el-col :span="19">{{dataForm.typeName}}</el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="5" class="form-viewonly__title">检查内容：</el-col>
        <el-col :span="19">
          <point-type-detail v-if="visible" :dataInfo="{id:dataForm.pointTypeId}"></point-type-detail>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="5" class="form-viewonly__title">所属单位：</el-col>
        <el-col :span="19">{{dataForm.orgName}}</el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="5" class="form-viewonly__title">地址：</el-col>
        <el-col :span="19">
          {{dataForm.buildLevelName}}
          <span v-if="dataForm.address">>{{dataForm.address}}</span>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>

<style lang="scss">
.form-viewonly {
  .el-row {
    margin-bottom: 20px;
  }
  &__title {
    color: #606266;
    text-align: right;
    font-weight: bold;
  }
}
</style>

<script>
import util from '@/utils/util'
import { saveAs } from 'file-saver'
import DetailMessage from './DetailMessage'
import PointTypeDetail from './PointTypeDetail'

export default {
  name: 'PointDetail',
  components: {
    DetailMessage,
    PointTypeDetail,
  },
  data() {
    return {
      defaultImg: require('../../../assets/images/inspect/default-point.png'),
      visible: false,
      dataForm: {
        id: '',
        orgId: '',
        address: '',
        name: '',
        picUrl: '',
        pointCode: '',
        pointTypeId: '',
        picUrl: '',
        fbsId: '',
      },
      contentList: [],
    }
  },
  created() {},
  methods: {
    handleExport() {
      let dataUrl = this.$refs.myQr.$el.getAttribute('src')
      saveAs(util.dataURLtoBlob(dataUrl), `${this.dataForm.pointCode}.png`)
    },
    formatPicUrl: util.formatPicUrl,
    init(data) {
      this.contentList = []
      this.dataForm = Object.assign({}, data)
      this.visible = true
    },
  },
}
</script>